<template>
	<view class="content">
		<view class="card">
			<step v-model="index" mini></step>
		</view>
		<template v-if="index==1">
			<view class="card">
				<cell title='申请人姓名' v-model="formData.sqrxm" maxlength="4" required></cell>
				<cell title='申请人身份证号' v-model="formData.sfz" maxlength="18" required></cell>
				<cell title='交行银行卡号' mode="input" v-model="formData.yhkh" maxlength="18" required></cell>
			</view>
			<view class="text-tip">
				<view class="text-tip-title">温馨提示</view>
				<view class="">1.交行卡包含交行借记卡和信用卡。</view>
				<view class="">2.若取法提供交行卡，可点击“其他银行认证”。</view>
			</view>
		</template>
		<template v-if="index==2">
			<view class="card">
				<cell title='申请人姓名' v-model="formData2.sqrxm" maxlength="4" required></cell>
				<cell title='预留手机号' mode="input" v-model="formData2.sjh" maxlength="11" required></cell>
				<cell title='图形验证码' mode="imgcode" v-model="formData2.txyzm" required></cell>
				<cell title='手机验证码' mode="pwd" v-model="formData2.dxyzh" required></cell>
			</view>
			<view class="text-tip">
				<view class="text-tip-title">温馨提示</view>
				<view class="">1.若多次尝试仍无法收到验证码，可点击“其他银行认证”。</view>
			</view>
		</template>
		<view class="flex-btn-box">
			<button class="flex-btn-12" type="primary" @click="next">继续</button>
			<button class="flex-btn-12" @click="change">其他银行卡认证</button>
		</view>
	</view>
</template>

<script>
	import step from "@/components/step.vue"
	export default {
		components: {
			step
		},
		data() {
			return {
				index: 1,
				btntext: '下一步',
				selectorItem: [{
						value: '1',
						label: '业务1'
					},
					{
						value: '2',
						label: '业务2'
					}
				],
				formData: {
					sqrxm: '张三',
					sfz: '511018****',
					yhkh: '6222 **** **** **** ****',

				},
				formData2: {
					sqrxm: '张三',
					sjh: '136 **** ****',
					txyzm: 'hito',
					dxyzh: '567123',
				}
			}
		},
		mounted() {

		},
		methods: {
			change() {
				uni.showToast({
					icon: "none",
					title: `暂无其他银行卡!`,
				})
			},
			toast(title) {
				uni.showToast({
					icon: "none",
					title,
				})
			},
			async next() {
				
				if(this.index===1) {
					if(!this.formData.sqrxm) {
						this.toast('请输入申请人姓名')
						return
					}
					if(!this.formData.sfz) {
						this.toast('请输入申请人身份证号')
						return
					}
					if(!this.formData.yhkh) {
						this.toast('请输入交行银行卡号')
						return
					}
				}else if(this.index===2) {
					if(!this.formData2.sqrxm) {
						this.toast('请输入申请人姓名')
						return
					}
					if(!this.formData2.sjh) {
						this.toast('请输入预留手机号')
						return
					}
					if(!this.formData2.txyzm) {
						this.toast('请输入图形验证码')
						return
					}
					if(!this.formData2.dxyzh) {
						this.toast('请输入手机验证码')
						return
					}
				}
				
				if (this.index < 3) {
					this.index++
				}
				if (this.index == 3) {
					await this.$myloading() // async
					uni.redirectTo({
						url:'/pages/science/rlsb'
					})
					this.btntext = '提交'
				}

			}
		}
	}
</script>


<style scoped>
	.content {}
</style>